<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>高级搜索-tapd版</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link id="link_" rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link class="link_" rel="stylesheet" href="../../layuiadmin/layui/css/admin.css" media="all">
    <link class="link_" rel="stylesheet" href="../../css/custom.css" media="all">
    <link class="link_" rel="stylesheet" href="../../css/select2.css" media="all">

</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card my_flex_btnCard">
                    <div class="layui-card-header">操作</div>
                    <div class="layui-card-body header_btn">
                        <div class="test-table-reload-btn">
                            <div class="layui-row">
                                <div class="layui-btn-container">
                                    <button class="layui-btn   layui-btn-sm" id="DecIHead_create" data-type="create"><i
                                            class="layui-icon layui-icon-add-1"></i>新增</button>

                                    <button class="layui-btn   layui-btn-sm  form_first" id="exsearch"
                                        card-toggle="exsearchCard">
                                        <i class="layui-icon layui-icon-search"></i>
                                        高级搜索
                                    </button>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="exsearchCard" class="layui-card card_tow layui-form-pane css_index">
                    <div class="layui-card-header">高级搜索</div>
                    <div class="layui-card-body">
                        <form class="layui-form" id="adv_search_form" lay-filter="adv_search_form">

                            <div class="advance-filter css_index"> </div>

                            <div class="layui-form-item">
                                <div class="layui-row">
                                    <div class="layui-btn-container">
                                        <button class="layui-btn   layui-btn-sm" lay-submit
                                            lay-filter="adv-search-btn"><i
                                                class="layui-icon layui-icon-search"></i>查询</button>
                                        <button class="layui-btn   layui-btn-sm    layui-btn-primary form_last "
                                            card-close="exsearchCard"><i
                                                class="layui-icon layui-icon-close"></i>关闭</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>


                <!-- <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="test-table-reload-btn">
                            <div class="layui-row">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 form-lable css_dindex">
                                    <div class="layui-inline">
                                        <text>&nbsp;关键字：</text>
                                    </div>
                                    <div class="layui-inline">
                                        <input class="css_dindex layui-input " name="keyword" id="keyword"
                                            autocomplete="off">
                                    </div>
                                    <button class="layui-btn   layui-btn-sm" data-type="reload"><i
                                            class="layui-icon layui-icon-search"></i>搜索</button>
                                    <button class="layui-btn   layui-btn-sm   layui-btn-primary " data-type="reload"><i
                                            class="layui-icon layui-icon-refresh-1 "></i>刷新</button>
                                </div>
                            </div>
                        </div>
                        <table class="layui-hide" id="test-table-reload" lay-filter="test-table-reload"></table>
                    </div>
                </div> -->
            </div>
        </div>
    </div>

    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">展示源代码</h2>
            <div class="layui-colla-content layui-show">
                <pre class="layui-code" id="code-html"></pre>
                <pre class="layui-code" id="code-js"></pre>
            </div>
        </div>
    </div>

    <script src="../../js/jquery.3.5.1.js"></script>
    <script src="../../js/select2.js"></script>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/modules/layui_ext.js"></script>

    <script>
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
            , forceTable: 'forceTable'
            , timemsg: 'timemsg'
            , select2: 'select2'
            , advance: 'advance'
        }).use(['index', 'element', 'table', 'laydate', 'code', 'timemsg', 'select2', 'forceTable', 'advance'], function () {

            // layBeforeEvent() // layui 行内 js 执行前事件

            var table = layui.table;
            var forceTable = layui.forceTable;
            var admin = layui.admin;
            var select = layui.select;
            var select2 = layui.select2;
            var form = layui.form;
            var laydate = layui.laydate;
            var timemsg = layui.timemsg;
            var $ = layui.$;

            layui.advance.init('#adv_search_form .advance-filter', {
                layFilter: "adv_search_form",
                fieldsData: {
                    "JobGuid": { "text": "JobGUID" }, "undefined": {}, "JobNo": { "text": "工作号" },
                    "StatusCode": {
                        text: '状态',
                        isSelect: true,
                        select2: {
                            url: '/BaseInfo/SysDict/StatusCode',
                            selected: [{}],
                            data: {
                                DictTypeCode: 'DecIHead'
                            }
                        }
                    },
                    "OrderDate": {
                        "text": "结束接单日期",
                        isDate: true,
                        dateType: 'datetime'
                    },
                    "CreateDateTime": {
                        "text": "结束创建时间",
                        isDate: true,
                        dateType: 'datetime'
                    },
                    "UpdateDateTime": {
                        "text": "结束更新时间",
                        isDate: true,
                        dateType: 'date'
                    },
                }
            })

            layui.advanceSearchUrl = '/DCS/DecIHead/LoadPageListWhere';      //高级搜索Url


            var active = {
                advanceSearch: function () {
                    var conditions = layui.advance.getFilterData('#adv_search_form .advance-filter')
                    if (!conditions) {
                        timemsg.open('获取查询条件出错了')
                        return
                    }
                    if (conditions['data'].length === 0) {
                        timemsg.open('请输入查询条件再点击查询')
                        return
                    }
                    var query = { query: JSON.stringify(conditions) };
                    table.reload('test-table-reload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: query,
                        url: layui.advanceSearchUrl,
                        query: null
                    });
                },
            };

            // $('.test-table-reload-btn .layui-btn').on('click', function () {
            //     var type = $(this).data('type');
            //     active[type] ? active[type].call(this, arguments) : '';
            //     return false;
            // });
            $('.export-button-group .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this, arguments) : '';
                return false;
            });

            form.on('submit(adv-search-btn)', function (obj) {
                active.advanceSearch();
                return false;
            })



            // 下面是源码的优化方法
            $("#code-html").text(`<form class="layui-form" id="adv_search_form" lay-filter="adv_search_form">

    <!-- 这里就是放置高级搜索的位置了 -->
    <div class="advance-filter css_index"> </div>

    <div class="layui-form-item">
        <div class="layui-row">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="adv-search-btn">  <i class="layui-icon layui-icon-search"></i>查询  </button>
                <button class="layui-btn doxygen-icon layui-btn-primary form_last" card-close="exsearchCard">  <i class="layui-icon layui-icon-close"></i>关闭  </button>
            </div>
        </div>
    </div>
</form>`)
            $("#code-js").text(`// 要导入advance模块。初始化高级搜索
layui.advance.init('#adv_search_form .advance-filter', {
    layFilter: "adv_search_form",
    fieldsData: {
        "JobGuid": { "text": "JobGUID" }, "undefined": {}, "JobNo": { "text": "工作号" },
        "StatusCode": {
            text: '状态',
            isSelect: true,
            select2: {
                url: '/BaseInfo/SysDict/StatusCode',
                selected: [{defaultId: '发送的数据：等于',defaultValue: '展示的数据：等于'}],
                data: {
                    DictTypeCode: 'DecIHead'
                }
            }
        },
        "OrderDate": {
            "text": "结束接单日期",
            isDate: true,
            dateType: 'datetime'
        }, 
        "UpdateDateTime": {
            "text": "结束更新时间",
            isDate: true,
            dateType: 'date'
        },
    }
})

// 下面是获取搜索对应的值的方法：
var active = {
    advanceSearch: function () {
        var conditions = layui.advance.getFilterData('#adv_search_form .advance-filter')
        if (!conditions) {
            timemsg.open('获取查询条件出错了')
            return
        }
        if (conditions['data'].length === 0) {
            timemsg.open('请输入查询条件再点击查询')
            return
        }
        var query = { query: JSON.stringify(conditions) };
        table.reload('test-table-reload', {
            page: {
                curr: 1 //重新从第 1 页开始
            }
            , where: query,
            url: layui.advanceSearchUrl,
            query: null
        });
    },
};

// 点击查询按钮
form.on('submit(adv-search-btn)', function (obj) {
    active.advanceSearch();
    return false;
})

`)
            layui.code({
                elem: '#code-html',
                title: 'HTML源码',
                about: false
            }); //引用code方法
            layui.code({
                elem: '#code-js',
                title: 'JavaScript源码',
                about: false
            }); //引用code方法

            init();  // 全局初始化

            layLoadEvent() // layui 行内 js 执行完成事件
        });
    </script>

</body>

</html>